<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="searchParams" ref="searchForm">
        <el-form-item label="课程名称：" prop="courseName">
          <el-input v-model="searchParams.courseName" placeholder="课程名称" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="searchParams.status" placeholder="全部">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" :disabled="loading" @click="getTableData(1)">查询搜索</el-button>
        <el-button :disabled="loading" @click="reset">重置</el-button>
      </el-form>
      <el-button @click="handleCreate">添加课程</el-button>
    </div>

    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="courseName" label="课程名称"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="sortNum" label="排序"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <div
            class="status-cicle"
            :style="{
              background: scope.row.status===0?'red':'green'
            }"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template slot-scope="scope">
           <el-button
            :type="scope.row.status?'danger':'success'"
            @click="toggleStatus(scope.row)">
             {{ scope.row.status ? '下架' : '上架'}}
          </el-button>
           <el-button @click="handleUpdate(scope.row.id)">编辑</el-button>
           <el-button @click="handleContent(scope.row.id)">内容管理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchParams.currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="searchParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :disabled="loading"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { getQueryCourses, changeState } from '@/services/course'
import { Form } from 'element-ui'

export default Vue.extend({
  name: 'CouseIndex',

  data () {
    return {
      searchParams: {
        courseName: null,
        currentPage: 1,
        pageSize: 5,
        status: null
      },
      loading: false,
      tableData: [],
      total: 0,
      statusList: [
        {
          value: 0,
          label: '下架'
        },
        {
          value: 1,
          label: '下架'
        }
      ]
    }
  },

  mounted () {
    this.getTableData()
  },

  methods: {
    getTableData (current: number | void) {
      if (current) {
        this.searchParams.currentPage = current
      }
      this.loading = true
      getQueryCourses(this.searchParams).then((res: any) => {
        if (res.data.code === '000000') {
          const { records, total } = res.data.data
          this.tableData = records
          this.total = total
        }
      }).finally(() => {
        this.loading = false
      })
    },

    handleCurrentChange (val: number) {
      this.searchParams.currentPage = val
      this.getTableData()
    },

    handleSizeChange (val: number) {
      this.searchParams.pageSize = val
      this.searchParams.currentPage = 1
      this.getTableData()
    },

    reset () {
      (this.$refs.searchForm as Form).resetFields()
      this.searchParams.currentPage = 1
      this.getTableData()
    },

    handleCreate () {
      this.$router.push({
        name: 'course-create'
      })
    },

    handleUpdate (id: number) {
      this.$router.push(`/course/update/${id}`)
    },

    handleContent (id: number) {
      this.$router.push(`/course/content/${id}`)
    },

    toggleStatus (row: any) {
      changeState({
        courseId: row.courseId,
        status: row.status ? 1 : 0
      }).then(res => {
        if (res.data.code === '000000') {
          this.$message.success('操作成功')
          this.getTableData()
        }
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.status-cicle{
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
</style>
